<template>

  <div>
    <div v-if="form.skuFlag == 1" class="table-container pad-t-20 pad-b-20">
      <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--medium el-table--scrollable-x">
        <div class="el-table__body-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
            <thead class="el-table__header">
            <tr>
              <template v-for="(item, indexTh) in form.qualityData">
                <th width="135" :key="indexTh">
                  <div class="cell text-align-c">{{ item.skuPropName }}</div>
                </th>
              </template>
              <th width="135">
                <div class="cell text-align-c">图片</div>
              </th>
              <th width="135">
                <div class="cell text-align-c">供应价(元)</div>
              </th>
              <th width="135">
                <div class="cell text-align-c">划线价(元)</div>
              </th>
              <th width="135">
                <div class="cell text-align-c">库存</div>
              </th>
              <th width="135">
                <div class="cell text-align-c">条码</div>
              </th>
            </tr>
            </thead>
            <tbody>
            <!-- 规格为1个 -->
            <template v-if="form.qualityData.length == 1">

              <tr v-for="(item, index) in form.singleTable" :key="index">
                <td>
                  <div class="cell text-align-c">
                    {{ item.skuPropValue }}
                  </div>
                </td>

                <td>
                  <div class="cell text-align-c">
                    <div>
                      <img v-if="item.imageUrl" :src="item.imageUrl" width="42px" height="42px" style="margin-left: -1px;margin-top: -1px;">
                      <i v-else class="el-icon-plus"></i>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.supplyPrice}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.scribingPrice}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.stock}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.goodsBarCode}}
                  </div>
                </td>
              </tr>
            </template>
            <!-- 规格有2个以上 -->
            <template v-else>

              <tr v-for="(item, index) in form.qualityTable" :key="index">

                <template v-for="(subItem, subIndex) in item">
                  <template v-if="subItem.skuPropId">
                    <td>
                      <div class="cell text-align-c">
                        {{subItem.skuPropValue}}
                      </div>
                    </td>
                  </template>
                </template>

                <td>
                  <div class="cell text-align-c">
                    <div>
                      <img v-if="item.imageUrl" :src="item.imageUrl" width="42px" height="42px" style="margin-left: -1px;margin-top: -1px;">
                      <i v-else class="el-icon-plus"></i>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.supplyPrice}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.scribingPrice}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.stock}}
                  </div>
                </td>
                <td>
                  <div class="cell">
                    {{item.goodsBarCode}}
                  </div>
                </td>
              </tr>
            </template>


            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        form: {
          skuFlag: '0',
          supplyPrice: '0',
          scribingPrice: '0',
          supplierPostFee: 0,
          stock: '',
          goodsType: '',
          goodsBarCode: '',
          singleTable: [],
          qualityData: [
            {
              skuPropId: -1,
              skuPropName: '',
              skuPropValueList: [
                {
                  skuPropValue: '',
                  skuPropValueId: -2,
                  skuPropId: -1,
                  skuPropName: ''
                }
              ]
            }
          ],
          qualityTable: [],
          dataTable: []
        }
      }
    },
    // 初始化页面
    created() {
      this.initGoodsEdit()
    },
    methods: {
      // 数列展示
      qualityInit() {
        const arrQta = []
        const itemQta = this.form.qualityData
        if (itemQta.length === 1) {
          const skuPropId = itemQta[0].skuPropId
          const skuPropName = itemQta[0].skuPropName
          const skuPropValueList = itemQta[0].skuPropValueList
          for (let i = 0; i < skuPropValueList.length; i++) {
            skuPropValueList[i].skuPropId = skuPropId
            skuPropValueList[i].skuPropName = skuPropName
          }
          this.form.singleTable = skuPropValueList
          // qualityTable = this.$utils.descartes(arrQta)
        } else {
          const skuCache = {}
          if (this.form.qualityTable.length > 0) {
            this.form.qualityTable.forEach(row => {
              let item = skuCache
              for (const col in row) {
                if (row[col].skuPropValueId) {
                  if (!item[row[col].skuPropValueId]) {
                    item[row[col].skuPropValueId] = { ...row }
                  }
                  item = item[row[col].skuPropValueId]
                }
              }
            })
          }
          this.form.qualityTable = []
          this.showSingle = 0
          for (let i = 0; i < itemQta.length; i++) {
            const skuPropId = itemQta[i].skuPropId
            const skuPropName = itemQta[i].skuPropName
            for (let j = 0; j < itemQta[i].skuPropValueList.length; j++) {
              itemQta[i].skuPropValueList[j].skuPropId = skuPropId
              itemQta[i].skuPropValueList[j].skuPropName = skuPropName
            }
            arrQta.push(itemQta[i].skuPropValueList)
          }
          this.form.qualityTable = this.$utils.descartes(arrQta)
          if (this.form.qualityTable.length > 0) {
            this.form.qualityTable.forEach((row, index) => {
              let item = skuCache
              for (const col in row) {
                if (row[col].skuPropValueId) {
                  if (item[row[col].skuPropValueId]) {
                    item = item[row[col].skuPropValueId]
                  }
                }
              }
              // 新增子规格，设置原来的sku的值
              if (item.supplyPrice) {
                this.$set(this.form.qualityTable[index], 'supplyPrice', item.supplyPrice)
              }
              if (item.scribingPrice) {
                this.$set(this.form.qualityTable[index], 'scribingPrice', item.scribingPrice)
              }
              if (item.goodsBarCode) {
                this.$set(this.form.qualityTable[index], 'goodsBarCode', item.goodsBarCode)
              }
              if (item.stock) {
                this.$set(this.form.qualityTable[index], 'stock', item.stock)
              }
              if (item.imageUrl) {
                this.$set(this.form.qualityTable[index], 'imageUrl', item.imageUrl)
              }
            })
          }
        }
      },
      setQualityTable(dataTable) {
        const skuValueMap = new Map()
        for (let i = 0; i < dataTable.length; i++) {
          skuValueMap.set(dataTable[i].skuValueIds, dataTable[i])
        }

        const qualityTable = this.form.qualityTable
        const qualityData = this.form.qualityData

        if (qualityData.length === 1) {
          const skuPropValueList = qualityData[0].skuPropValueList
          const skuPropId = qualityData[0].skuPropId
          const skuPropName = qualityData[0].skuPropName

          for (let i = 0; i < skuPropValueList.length; i++) {
            skuPropValueList[i].skuPropId = skuPropId
            skuPropValueList[i].skuPropName = skuPropName
            const skuPropValueId = skuPropValueList[i].skuPropValueId
            const array = []
            array.push(skuPropValueId)
            const skuValueKey = array.sort().toString()
            const skuValueObj = skuValueMap.get(skuValueKey)
            skuPropValueList[i].imageUrl = this.$utils.isExist(skuValueObj.imageUrl) ? skuValueObj.imageUrl : ''
            skuPropValueList[i].price = this.$utils.isExist(skuValueObj.price) ? skuValueObj.price : ''
            skuPropValueList[i].supplyPrice = this.$utils.isExist(skuValueObj.supplyPrice) ? skuValueObj.supplyPrice : ''
            skuPropValueList[i].scribingPrice = this.$utils.isExist(skuValueObj.scribingPrice) ? skuValueObj.scribingPrice : ''
            skuPropValueList[i].stock = this.$utils.isExist(skuValueObj.stock) ? skuValueObj.stock : ''
            skuPropValueList[i].goodsBarCode = this.$utils.isExist(skuValueObj.goodsBarCode) ? skuValueObj.goodsBarCode : ''
            skuPropValueList[i].warnStock = this.$utils.isExist(skuValueObj.warnStock) ? skuValueObj.warnStock : ''
          }

          this.form.singleTable = skuPropValueList
        } else {
          const array = []
          for (let i = 0; i < qualityTable.length; i++) {
            const item = qualityTable[i]
            const skuPropValueList = []
            for (const key in item) {
              if (this.$utils.isExist(item[key].skuPropId)) {
                const skuPropValueId = item[key].skuPropValueId
                skuPropValueList.push(skuPropValueId)
              }
            }

            const obj = {}
            const skuValueKey = skuPropValueList.sort().toString()
            const skuValueObj = skuValueMap.get(skuValueKey)
            if (skuValueObj != null) {
              for (const key in item) {
                obj[key] = item[key]
              }
              obj.imageUrl = this.$utils.isExist(skuValueObj.imageUrl) ? skuValueObj.imageUrl : ''
              obj.price = this.$utils.isExist(skuValueObj.price) ? skuValueObj.price : ''
              obj.stock = this.$utils.isExist(skuValueObj.stock) ? skuValueObj.stock : ''
              obj.goodsBarCode = this.$utils.isExist(skuValueObj.goodsBarCode) ? skuValueObj.goodsBarCode : ''
              obj.supplyPrice = this.$utils.isExist(skuValueObj.supplyPrice) ? skuValueObj.supplyPrice : ''
              obj.scribingPrice = this.$utils.isExist(skuValueObj.scribingPrice) ? skuValueObj.scribingPrice : ''
              obj.warnStock = this.$utils.isExist(skuValueObj.warnStock) ? skuValueObj.warnStock : ''
              array.push(obj)
            } else {
              console.log('sku异常' + skuValueKey)
            }
          }
          this.form.qualityTable = array
        }
      },
      getID(length) {
        const ids = this.ids
        const id = -parseInt(Math.round(Math.random() * 100000000))
        if (ids.indexOf(id) > 0) {
          this.getID()
        } else {
          ids.push(id)
          this.ids = ids
          return id
        }
      },
      getLoading(index) {
        const that = this
        if (that.loadingTotal === '1' && this.imageIndex === index) {
          return true
        } else {
          return false
        }
      },
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          const skuFlag = that.$utils.isExist(data.skuFlag) ? data.skuFlag + '' : '0'
          that.status = that.$utils.isExist(data.status) ? data.status : '1'
          that.form.skuFlag = skuFlag
          that.form.stock = that.$utils.isExist(data.stock) ? data.stock : '0'
          that.form.supplyPrice = data.supplyPrice
          that.form.scribingPrice = data.scribingPrice
          that.form.supplierPostFee = data.supplierPostFee
          that.form.goodsBarCode = that.$utils.isExist(data.goodsBarCode) ? data.goodsBarCode : ''
          that.form.goodsType = that.$utils.isExist(data.goodsType) ? data.goodsType.toString() : ''
          if (that.form.goodsType === '30') {
            that.goodsTypeRetail = true
          }
          if (that.form.goodsType === '31') {
            that.goodsTypeWholesale = true
          }
          if (that.form.goodsType === '32') {
            that.goodsTypeRetail = true
            that.goodsTypeWholesale = true
          }
          if (data.goodsId) {
            that.goodsTypeBoolean = true
          } else {
            that.goodsTypeBoolean = false
          }
          if (skuFlag === '1') {
            const qualityData = data.qualityData
            if (qualityData.length === 1) {
              const skuPropValueList = qualityData[0].skuPropValueList
              for (let i = 0; i < skuPropValueList.length; i++) {
                skuPropValueList[i].supplyPrice = ''
                skuPropValueList[i].scribingPrice = ''
                skuPropValueList[i].stock = ''
                skuPropValueList[i].goodsBarCode = ''
              }
            }
            that.form.qualityData = qualityData
            that.form.dataTable = data.qualityTable
            that.qualityInit()
            that.setQualityTable(data.qualityTable)
          }
        })
      }
    }
  }
</script>


<style lang="less" scoped>
  .table-container {
    min-height: auto;
  }

  .quality-bar {
    background: #f2f2f2;
    border: #e4e4e4 1px solid;
    padding: 10px;

    .close-quality {
      color: #515151;
    }

    .close-sub {
      color: #aeaeae;
      position: absolute;
      right: -6px;
      top: -6px;
      font-size: 18px;
    }

    .qta-item:before {
      content: '';
      position: absolute;
      left: 12px;
      top: 34px;
      width: 1px;
      height: 46px;
      background: #bcbcbc;
    }

    .qta-item:after {
      content: '';
      position: absolute;
      left: 12px;
      top: 79px;
      width: 19px;
      height: 1px;
      background: #bcbcbc;
    }
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    width: 55%;
    margin-right: 5%;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 55%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 130px;
    height: 130px;
    display: block;
  }

  .pic-bar {
    position: relative;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .input-bar-0 {
    width: 35% !important;
  }

  .input-bar-1 {
    width: 40%;
    margin-bottom: 5px !important;
  }

  .input-bar-2 {
    width: 60%;
    margin-bottom: 5px !important;
  }

  .input-bar-3 {
    width: 100%;
    margin-bottom: 5px !important;
  }

  .input-bar-4 {
    width: 35% !important;
  }

  .width-input-1 {
    width: 100% !important;
  }

  .width-input-2 {
    width: 35% !important;
  }

  .width-input-3 {
    width: 30% !important;
  }

  .width-date {
    width: 200px !important;
  }

  .gray-bar {
    background: #e4e4e4;
    padding: 5px 0 0 0;
    margin-bottom: 20px;
  }

  .gray-active {
    margin-right: 20px;
    padding: 15px 13px;

    &.active {
      background: #e4e4e4;
    }
  }

  .radio-top-bar {
    margin-bottom: -22px;
  }

  .noraml-height {
    height: 40px;
  }
</style>
